<template>
  <!--     box-shadow: 0px 0px 8px 0px #9f9fa0;    -->
  <div class="home">
    <div class="parameter">
      <div class="modular">
        <!-- 每个版块 -->
        <i class="iconfont icon-Total-order icon_1"></i>
        <div class="title">
          <p>总订单</p>
          <p>{{homeData.totalOrder |formattMoney}}</p>
        </div>
      </div>
      <div class="modular">
        <!-- 每个版块 -->
        <i class="iconfont icon-sales-volume icon_2"></i>
        <div class="title">
          <p>总销售额</p>
         <p>{{homeData.totalAmount |formattMoney}}</p>
         
        </div>
      </div>
      <div class="modular">
        <!-- 每个版块 -->
        <i class="iconfont icon-tody-total-order icon_3"></i>
        <div class="title">
          <p>今日订单</p>
            <p>{{homeData.todayOrder |formattMoney}}</p>
        </div>
      </div>
      <div class="modular modular4">
        <!-- 每个版块 -->
        <i class="iconfont icon-tody-sales-volume icon_4"></i>
        <div class="title">
          <p>今日销售额</p>
     <p>{{homeData.totayAmount |formattMoney}}</p>

        </div>
      </div>
    </div>

    <!-- 统计图 -->
    <div ref="main" class="main"></div>
  </div>
</template>


<script>
import * as echarts from "echarts"; //引入echarts图表格
import "@/assets/fonts/font/iconfont.css"; //引入阿里字体图标的css的
import {totalData} from '@/api/order'

export default {
  //挂在后  有数据  有dom
  async mounted() {
    //从后端获取数据
    let res = await totalData();
    console.log(res);//打印结果是后台首页数据
    let {
        amountData,//金额数据
        orderData,//订单数据
        todayOrder,//今日订单
        totalAmount,//总销售额
        totalOrder,//总订单
        totayAmount,//今日销售额
        xData,//x轴数据
        }=res
    this.homeData=res
    console.log(this.homeData);//替换数据


    // 基于准备好的dom，初始化echarts实例
    // const myChart = echarts.init(this.$refs.main);
    //找到有大小的盒子
    this.linehart = echarts.init(this.$refs.main);

    // 指定图表的配置项和数据
    const option = {
      title: {
        text: "数据统计",
      },
      tooltip: {
        trigger: "axis",
      },
      legend: {
        data: ["金额数据", "订单数据", ],
      },
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      //工具栏
      toolbox:{
          feature:{
            saveAsImage:{},//保存为图片
            dataView:{},//数据展示
            magicType:{
              type:["line","bar","stack"]
            }
          }
      },
      xAxis: {
        // type: 'category',
        boundaryGap: false, //起点位置

        data: xData,
      },
      yAxis: {
        type: "value",

        axisLine: { show: true },
      },
      series: [
        {name: "金额数据",type: "line",data: amountData,},
        {name: "订单数据", type: "line",data: orderData,
        },
      ],
    };

    // 使用刚指定的配置项和数据显示图表。
    this.linehart.setOption(option);


    //让图表自适应
    window.addEventListener("resize", this.resizeListener);
  },
  //方法
  methods: {
    //图表自适应函数
    resizeListener() {
      this.linehart.resize();//echarts内置对象==resize()重置图表大小
    },
  },
  // 数据
  data() {
    return {
      homeData:{
        amountData:'',//金额数据
        orderData:'',//订单数据
        todayOrder:'',//今日订单
        totalAmount:'',//总销售额
        totalOrder:'',//总订单
        totayAmount:'',//今日销售额
        xData:"",//x轴数据
      },//首页数据
      linehart: {},
    };
  },
  //销毁前
  beforeDestroy(){
      window.removeEventListener("resize", this.resizeListener);
  },
  filters:{
     formattMoney(num) {
      return num.toString().replace(/\d+/, function (n) {
      return n.replace(/(\d)(?=(?:\d{3})+$)/g, "$1,");
      });
    },
  }
};
</script>

<style lang="less" scoped>
.home {

  .parameter {
    display: flex;
    justify-content: space-between;
    // width: 100%;/
    margin-bottom: 80px;
    .modular {
      padding: 15px 40px;
      width: 400px;
      margin-right: 20px;

      justify-content: space-between;
      display: flex;
      background-color: #fff;
      align-items: center;
      box-shadow: 0px 0px 8px 0px #9f9fa0;
      border-radius: 5px;
      // 字体图标颜色
      & > i {
        font-size: 60px;
        font-weight: bold;
      }
      .icon_1,
      .icon_3 {
        color: rgb(31, 107, 248);
      }
      .icon_2 {
        color: coral;
      }
      .icon_4 {
        color: rgb(50, 240, 107);
      }
      .title {
        display: flex;

        flex-direction: column;
        width: 80px;
        align-items: center;
        & > p:nth-of-type(1) {
          color: rgb(144, 144, 144);
        }
        & > p:nth-of-type(2) {
          font-weight: bold;
        }
      }
    }
    .modular4{
      margin-right: 0;
    }
  }

  .main {
    flex: 1;
    height: 650px;
    background-color: #fff;
    padding: 20px;
    box-shadow: 0px 0px 8px 0px #9f9fa0;
    border-radius: 5px;
    display: flex;
  }
}
</style>